import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';

export default class extends PureComponent {
    render() {
        const {pre_month_price, pre_month_price_end, present_month_price} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.item}>
                    <View style={styles.titleWrap}>
                        <Text style={styles.title}>结算收入</Text>
                        <TouchableOpacity>
                            <Image source={require('../../../images/icon_question_2.png')} style={styles.img}/>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.money}>￥{pre_month_price_end}</Text>
                    <Text style={styles.text}>上月佣金</Text>
                </View>
                <View style={styles.item}>
                    <View style={styles.titleWrap}>
                        <Text style={styles.title}>预估收入</Text>
                        <TouchableOpacity>
                            <Image source={require('../../../images/icon_question_2.png')} style={styles.img}/>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.money}>￥{pre_month_price}</Text>
                    <Text style={styles.text}>本月佣金</Text>
                </View>
                <View style={styles.item}>
                    <View style={styles.titleWrap}>
                        <Text style={styles.title}>预估收入</Text>
                        <TouchableOpacity>
                            <Image source={require('../../../images/icon_question_2.png')} style={styles.img}/>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.money}>￥{present_month_price}</Text>
                    <Text style={styles.text}>上月佣金</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 90,
        marginTop: 9,
        paddingTop: 10,
        paddingBottom: 10,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    item: {
        flex: 1,
        height: 70,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    img: {
        width: 20,
        height: 20
    },
    titleWrap: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 12,
        color: '#5a5a5a'
    },
    money: {
        fontSize: 11,
        color: '#5a5a5a'
    },
    text: {
        fontSize: 9,
        color: '#a7a7a7'
    }
});
